<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <!--<script src="https://unpkg.com/axios/dist/axios.min.js"></script>-->
    <script src="static/js/axios.js"></script>
</head>
<body>
    <H1>测试Ajax 里面的axios</H1>
    <span ></span>
    <a href="pages/crud.html">跳转到CRUD测试Vue和Axios的整合</a>
    <!--<a href="axiosServlet">点击测试是否进入</a>-->
    <script>
        /*
        写法一 常规写法
        */
        axios({
            url: "axiosServlet",
            method: "get",
            params: {
                id: 1001,
                name: "Tomcat",
            }
        }).then(p => {
            console.log(p);
            console.log("常规写法1");
            console.log("状态码: ", p.status);
            console.log("响应数据: ", p.data);
        }).catch(e => console.log(e));
        // 异步 下面这个会先输出
        console.log("----------------------------------")
        /*
        * 优化写法一
        *  axios.post()  //SpringMVC时
        *  axios.get("url地址","提交的参数")
        * */
        axios.get("axiosServlet", {
            params: {
                id: 1002,
                name: "Jerry"
            }
        }).then(p => {
            console.log(p);
            console.log("优化写法一");
            console.log(p.data);
        })

        /*
        * 优化写法二
        *  //post提交时参数传递的是一个对象 ,后端服务器需要整体接收 springMVC中使用注解@RequestBody接收
        * */
        axios.get("axiosServlet?id=1003&name=tomcat")
            .then(p => console.log(p.data))
        axios.post("axiosServlet", {id: 1004, name: "张三"})
            .then(p => console.log(p.data))

        /*
        * 最终版本1 async await 优化
        * 建议使用:  async 标识函数  await 标识ajax请求
        * */
        async function getMsg() {
            return await axios.get("axiosServlet?id=1005&name=tomcat").data
        }

        getMsg()

        /*
        * 最终版本二
        *   如果想直接获取服务器数据 则建议使用如下操作
        *
        * */
        async function getMsgFinal() {
            const {status: statusCode, data: result} = await axios.get("axiosServlet?id=1006&name=最终版本!!!")
            console.log("终极状态码:" + statusCode + "|" + "终极数据:" + result)
        }
        getMsgFinal()
    </script>
</body>
</html>